<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/swiper/swiper-bundle.min.js"></script>
    <script src="./vue2.js"></script>
    <link rel="stylesheet" href="./lib/swiper/swiper-bundle.css">
    <style>
        .kerwin {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="box">
        <header>header{{data1}}</header>
        <swiper :key="datalsit.length">
            <swiper-item v-for="data in datalsit" :key="data">
                <img :src="data" />
            </swiper-item>
            <!-- <div class="swiper-scrollbar"></div> -->
        </swiper>
    </div>
</body>
<script>
    Vue.component("swiperItem", {
        template: `<div class="swiper-slide">
                  <slot></slot>
                  </div>`,

    })
    Vue.component("swiper", {
        template: `<div class="swiper kerwin">
                        <div class="swiper-wrapper">
                            <slot></slot>        
                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>`,
        mounted() {
            new Swiper('.kerwin', {
                pagination: {
                    el: '.swiper-pagination'
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                loop: true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
            })
        }
    })
    let vm = new Vue({
        el: '#box',
        data: {
            datalsit: [],
            data1: 1
        },
        mounted() {
            setTimeout(() => {
                this.datalsit = ['https://gimg3.baidu.com/search/src=https%3A%2F%2Ffeed-image.baidu.com%2F0%2Fpic%2F-513984580_423210574.jpg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1663261200&t=f8e86c38d8489b1e35599941100e0dc3', 'https://gimg3.baidu.com/search/src=https%3A%2F%2Ffeed-image.baidu.com%2F0%2Fpic%2Ff9c66967d047811828908442ba9714b0.jpg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1663261200&t=bfae30a6213e32f83e62fe4cd1e65d28', 'https://gimg3.baidu.com/search/src=https%3A%2F%2Ffeed-image.baidu.com%2F0%2Fpic%2F1943754248_-308756426.jpg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1663261200&t=bf76785438e85e9e66356be6f5f2f736']
            }, 2000)
        },
        updated() {

        }
    })  
</script>

</html>